layui.use('flow', function(){
    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
    var flow = layui.flow;

    // 点击搜索框查询
    $("#searchBtn").click(function (){
        // 清除分类选项样式
        $(".item").css({"background-color":"#F7D6AA","color":"black"});
        flowfunction({articleTitle:$("#search").val(),authorName:$("#search").val(),tag:""});
    })
    // 点击分类查询
    $(".item").click(function(){
        $(this).css({"background-color":"#4D454D","color":"#efefef"}).siblings().css({"background-color":"#F7D6AA","color":"black"});
        var tag=$(this).find("#articlecategoryname")[0].innerHTML;
        flowfunction({articleTitle: $("#search").val(),authorName:$("#search").val(),tag:tag});
    })


    window.flowfunction=function (obj){
        $("#list").html("");
        flow.load({
            elem: '#list' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var list = [];

                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.post( '/study/getstudyarticlelist',{page:page,limit:10,articletitle:obj.articleTitle,authorname:obj.articleTitle,tag:obj.tag}, function(res){
                    console.log(res);
                    //假设你的列表返回在data集合中
                    layui.each(res.data.records, function(index, item){
                        console.log(item);
                        let pic=[];
                        let div="<a href='/mywechat/studyarticledetail?id="+item.id + "' class='gohref'>"
                                    div=div+"<div class='articlebox'>";

                                        div+="<div class='articlecontent'>";
                                            div+="<div class='articletitle'>";
                                                div +=item.title
                                            div=div+ "</div>";
                                            div+="<div class='information'>";
                                                if(item.tags.length>0 && item.tags!=null) {
                                                    div+="<div class='tags'>";
                                                    div+=item.tags
                                                    div=div+ "</div>";
                                                }

                                                div+="<div class='stars s5'></div>"
                                             div=div+ "</div>";
                                        div=div+ "</div>";
                                    div+="</div>";
                        div=div+ "</a>";

                        list.push(div);
                    });
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //totalPage为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(list.join(''), page < res.data.size);
                },'json');
            }
        });
    }

    flowfunction({articleTitle: "",tag: ""});

});
// <div class="box">-->
//
// <!--        <div class="mainpic">-->
// <!--            <img src="http://image.dntextile.com/a1a6745f-dd54-42d7-a343-73eb0ac99794" alt="" width="180px" height="300px">-->
// <!--        </div>-->
// <!--        <div class="title">-->
// <!--            我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题-->
// <!--        </div>-->
// <!--    </div>-->